<script setup lang="ts">
import { CloseSmall, FullScreen, Minus, OffScreen } from '@icon-park/vue-next'
import { ref } from 'vue'
interface IProps {
  windowName: WindowNameType
  title: string
}
const props = withDefaults(defineProps<IProps>(), {
  windowName: 'config',
  title: '项目文件',
})
const isFullScreen = ref(false)
const closeWindow = () => {
  window.api.closeWindow(props.windowName, 'destroy')
}
const miniWindow = () => {
  window.api.miniWindow(props.windowName)
}
const screenWindow = () => {
  window.api.screenWindow(props.windowName, !isFullScreen.value)
  isFullScreen.value = !isFullScreen.value
}
</script>

<template>
  <div class="bg-[#ff9600] shadow-sm border-b-1 px-5 py-2 flex justify-between items-center drag z-[9999] rounded-t-lg">
    <span class="text-white text-base">{{ props.title }}</span>
    <div class="flex justify-center gap-6 items-center nodrag">
      <Minus theme="outline" size="24" class="cursor-pointer" fill="#ffffff" @click="miniWindow" />
      <FullScreen
        theme="outline"
        size="24"
        class="cursor-pointer"
        fill="#ffffff"
        @click="screenWindow"
        v-if="!isFullScreen" />
      <OffScreen theme="outline" size="16" class="cursor-pointer" fill="#ffffff" @click="screenWindow" v-else />
      <CloseSmall theme="outline" size="24" class="cursor-pointer" fill="#ffffff" @click="closeWindow" />
    </div>
  </div>
</template>
